<template>
  <div class="container">
    <el-card class="brand">
      <div slot="header">
        <span>分类管理</span>
      </div>
      <p class="luification">乐居分类:</p>
      <el-row :gutter="20">
        <el-col v-for="item in list" :key="item.id" :span="6" :offset="0">
          <el-card shadow="hover">
            <div slot="header">
              <span>{{ item.name }}</span>
            </div>
            <img :src="item.icon" alt="" style="width:100%; height:300px">
          </el-card>
        </el-col>
      </el-row>
      <p class="classification">全部分类:</p>
      <el-table
        :data="totalList"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :tree-props="{children: 'children'}"
      >
        <el-table-column
          prop="name"
          label="菜单名称"
          fixed
          width="150"
        />
        <el-table-column
          prop="icon"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <img :src="scope.row.icon" style="width:60px; height:60px">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="分类名字"
          align="center"
          width="180"
        />
        <el-table-column
          prop="sort"
          label="排序"
          align="center"
          width="180"
        />
        <el-table-column
          prop="navStatus"
          label="显示状态"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.showStatus == 1">显示</p>
            <p v-else>不显示</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="navStatus"
          label="导航栏展示"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.navStatus == 1">展示</p>
            <p v-else>不展示</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          align="center"
          width="180"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          width="180"
        />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getAllCategory } from '@/api/commdity/classification'
export default {
  data() {
    return {
      list: [], // 乐居分类
      totalList: [] // 全部分类
    }
  },
  computed: {

  },
  created() {
    this.init()
  },
  mounted() {

  },
  methods: {
    init() {
      getAllCategory().then(res => {
        const { data, message: errMge, success } = res
        if (success) {
          const { items } = data
          this.list = items.find(el => el.category.name === '乐居').children
          this.totalList = items.map(el => {
            var item = {
              ...el.category, // 解构
              children: el.children
            }
            return item
          })
        } else {
          this.$message.error(errMge)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .container{
    padding: 30px;
    background-color: #f0f2f5;
    .brand{
    background-color: #fff;
    .classification{
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 30px;
    }
    .luification{
      margin-top: 0px;
       font-size: 16px;
      font-weight: 700;
      margin-bottom: 30px;
    }
  }
  }

</style>
